<template>
  <div class="home">
    <ul>
      <li class="product nav">
        <div class="item">商品</div>
        <div class="item">最新</div>
        <div class="item">开盘</div>
        <div class="item">昨收</div>
        <div class="item">最高</div>
        <div class="item">最低</div>
        <div class="item">涨幅</div>
        <div class="item">振幅</div>
      </li>
      <li class="product list" v-for="(item, index) in wsData" :key="index">
        <div class="item c_gold">{{item.symbol}}</div>
        <div class="item" :class="item.price < item.close ? 'c_green' : 'c_red'">{{item.price}}</div>
        <div class="item" :class="item.open < item.close ? 'c_green' : 'c_red'">{{item.open}}</div>
        <div class="item">{{item.close}}</div>
        <div class="item" :class="item.high < item.close ? 'c_green' : 'c_red'">{{item.high}}</div>
        <div class="item" :class="item.low < item.close ? 'c_green' : 'c_red'">{{item.low}}</div>
        <div class="item" :class="item.zf < 0 ? 'c_green' : 'c_red'">{{item.zf}}</div>
        <div class="item" :class="item.vf < 1 ? 'c_green' : 'c_red'">{{item.vf}}</div>
      </li>
    </ul>
    <div class="timer">
      <div>因为数据接口比较贵，所以每次只开启1分钟的请求时间，如果数据没有波动后请手动刷新！</div>
      <div>倒计时：{{second}}s</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wsData: [],
      ws: null,
      heartBeatTimer: null,
      second: 60,
      timer: null,
    };
  },
  components: {},
  created() {
    this.initSocket();
    this.timer = setInterval(() => {
      if(this.second == 0){
        clearInterval(this.timer);
      }else{
        this.second -= 1;
      }
    }, 1000)
  },
  mounted() {},
  methods: {
    initSocket() {
      this.ws = new WebSocket("ws://47.107.130.239:11111");
      this.ws.onopen = () => {
        this.ws.send("heartBeat");
        this.heartBeatTimer = setInterval(() => {
          this.ws.send("heartBeat");
        }, 30000);
      };
      this.ws.onmessage = e => {
        let data = JSON.parse(e.data);
        if (data instanceof Array) {
          this.wsData = data;
        } else {
          //当数组不为空时去更新其中一条数据
          if (this.wsData[0]) {
            let index = this.wsData.findIndex(item => {
              return item.symbol == data.symbol;
            });
            this.$set(this.wsData, index, data);
          }
        }
      };
      this.ws.onclose = e => {
        console.log("服务端已终止！");
        clearInterval(this.heartBeatTimer);
      };
      this.ws.onerror = e => {
        console.log("服务端error！");
        console.log(e);
      };
    }
  },
  beforeDestroy() {
    this.ws.close();
    clearInterval(this.heartBeatTimer);
  }
};
</script>

<style scoped lang="less">
.home {
  .product {
    display: flex;
    margin: 20px;
    .item {
      width: 110px;
    }
  }
  .nav{
    color: #00FFFF;
  }
  .timer{
    margin: 20px;
  }
  .c_gold{
    color: #ff0;
  }
  .c_red{
    color: #FF3C39;
  }
  .c_green{
    color: #00E700;
  }
}
</style>
